import "./App.css";
import React, { useState } from "react";
// hooks 可以让函数式组件拥有class组件一样的状态和钩子

function App() {
  // 声明一个新的叫做 “count” 的 state 变量
  // useState 就是一个hook
  // count 就是渲染中需要的数据
  // setCount就是提供修改数据的方法
  // useState的返回值就是一个数组
  const [count, setCount] = useState(0);
  const [name, setName] = useState("小明");
  return (
    <div>
      <p>
        You clicked {count} times{name}
      </p>

      <button onClick={() => setCount(count + 1)}>Click me</button>
      <button onClick={() => setName("小红")}>修改名字</button>
    </div>
  );
}

export default App;
